a<template>
    <div class="layout-main-conent">
        <a-card
            :bordered="false"
            style="margin-bottom: 15px"
            :bodyStyle="{paddingBottom: '0'}"
        >
            <a-form :labelCol="{ span: 6, offset: 0 }" :wrapper-col="{span:18}">
                <a-row :gutter="16" justify="end">
                    <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                        <a-form-item  label="用户姓名：">
                            <a-input placeholder="请输入" v-model:value="searchModelRef.username" />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                        <a-form-item  label="域账号：">
                            <a-input placeholder="请输入" v-model:value="searchModelRef.adAccount" />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                        <a-form-item  label="科室：">
                            <a-input placeholder="请输入" v-model:value="searchModelRef.orgName" />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                        <div class="text-align-right" style="padding-bottom: 24px" >
                            <a-button type="primary" @click="searchFormSubmit">查询</a-button>
                            <a-button style="margin-left: 8px" @click="searchResetFields">重置</a-button>
                        </div>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>
        <a-card :bordered="false">
            <a-table 
                :columns="columns" 
                :data-source="data" 
                :loading="loading"
                :pagination="pagination" >
                <template #action="{ record }">
                    <a-button type="link" @click="() => detailData(record.id)">查看</a-button>
                </template>
            </a-table>
        </a-card>
    </div>
</template>
<script lang="ts" setup>
import { computed, ComputedRef, defineComponent, onMounted, reactive, Ref, ref } from "vue";
import { message, Modal, Form } from "ant-design-vue";
import { queryUserList } from './service'
// 列表数据
const data = ref([]);
// 列表分页
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0, // 假设总共有100条数据
  showTotal: (total) => `共 ${total} 条数据`,
  onChange: (page, pageSize) => {
    // 分页改变时的回调函数
    pagination.value.current = page
    pagination.value.pageSize = pageSize
    getUserList(page)
  },
  showSizeChanger: true,
  showQuickJumper: true
});

// 列表字段
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 80,
    customRender: ({text, index}: { text: any; index: number}) => (pagination.value.current - 1) * pagination.value.pageSize + index + 1,
  },
  {
    title: '姓名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '域账号',
    dataIndex: 'adAccount',
    key: 'adAccount',
  },
  {
    title: '部门科室',
    dataIndex: 'orgName',
    key: 'orgName',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
  },
  {
    title: '更新时间',
    dataIndex: 'updatedTime',
    key: 'updatedTime',
  },
];

// 获取数据
const loading = ref<boolean>(true);


// 搜索
const searchFormSubmit = async () => {
    getUserList(1)
}
const searchResetFields = async() => {
    searchModelRef.value = ({
        username: '',
        adAccount: '',
        orgName: ''
    })
    searchFormSubmit()
}
// 表单值
const searchModelRef = ref({
    username: '',
    adAccount: '',
    orgName: ''
});
const getUserList = async (current: number) => {
    const params = {
        pageNum: current,
        pageSize: pagination.value.pageSize,
        ...searchModelRef.value
    }
    loading.value = true;
    const res = await queryUserList(params)
    if (res.success) {
        data.value = res.data.records
        pagination.value.total = res.data.total
    }
    loading.value = false;
}
const detailData = async(id: string) => {
    try {
        message.warning('进行了搜索!');
    } catch (error: any) {
        message.warning(error);
    }
}

onMounted(()=> {
    getUserList(1);
})
</script>
<style scoped lang="less">
:deep(.ant-card-head-title){
    button{
        margin-right: 20px;
    }
}
</style>./data